<template>
  <div class="section-wrap">
    <div class="header">
      <x-icon
        style="fill:#fff;margin-top:8px;"
        type="ios-close-empty"
        size="30"
        class="icon-white"
        @click="goBack"
      ></x-icon>
      <a class="saveBtns" @click="saveItem" v-if="canAudit">保存</a>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>关键要求</label>
          </div>
          <span @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
        </div>
        <div>
          <p class="textarea" :class="{'unfold':unfoldMeasure}">{{dataDetail.keyRequire}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>合理缺项</label>
        </div>
        <div style="width:60%;height:100%;" class="s_fixed">
          <x-switch
            v-model="dataDetail.isMissingItem"
            :value-map="[0,1]"
            :title="' '"
            @on-change="changeIsMissing"
            :disabled="!canAudit"
          ></x-switch>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>应得分</label>
        </div>
        <p>{{dataDetail.shouldScore}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title" v-if="!canAudit">
          <label>实得分</label>
        </div>
        <p v-if="!canAudit">{{dataDetail.actualScore}}</p>
        <group class="numBut" style="width:100%;" v-else>
          <x-number
            :title="titleActualScore"
            v-model="dataDetail.actualScore"
            :min="0"
            :max="dataDetail.shouldScore"
            :fillable="true"
            :disabled="fillable"
          ></x-number>
        </group>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>问题图片</label>
          </div>
          <span>当前共{{dataDetail.fileList.length}}张照片</span>
        </div>
        <div>
          <div class="upload-wrap">
            <div class="upload-item" v-for="(item,index) in dataDetail.fileList" :key="index">
              <img :src="baseurl+'/'+item.url" :preview="preview" alt @click="previewImg" />
              <span v-if="canAudit" @click="removeImg(item.name,index)"></span>
            </div>
            <div class="upload-item" v-if="canAudit">
              <img src="@static/images/upload.png" alt />
              <input type="file" :name="('file')" @change="upload" />
            </div>
          </div>
        </div>
      </div>
      <div class="form-item form-item-style2" style="clear: both;border-bottom: 0px solid #efeff4;">
        <div class="label-title" style="width:100%">
          <label>扣分原因</label>
        </div>
        <div class="s_textarea">
          <x-textarea v-model="dataDetail.deductionReason" :max="50" :disabled="!canAudit"></x-textarea>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import upload from "@/commonComponents/upload/index";
import {
  XSwitch,
  Group,
  XNumber,
  XTextarea,
  ConfirmPlugin,
  AlertModule
} from "vux";

export default {
  name: "riskManage2",
  props: {
    dataDetail: {
      type: Object,
      default: function() {
        return {
          keyRequire: "",
          shouldScore: 0,
          actualScore: 0,
          deductionReason: "",
          fileList: []
        };
      }
    },
    canAudit: {
      type: Boolean,
      default: true
    },
    ismissing: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dataDetail(val) {
      if (val) this.length = val.fileList.length;
    }
  },
  data() {
    return {
      preview: "",
      baseurl: this.$axiosAjax.baseurl,
      unfoldMeasure: false, // 是否展开
      imgList: [],
      titleMissingItem: "合理缺项",
      titleActualScore: "实际得分",
      fillable: false,
      titleReason: "扣分原因",
      length: 0
    };
  },
  components: {
    upload,
    XSwitch,
    Group,
    XNumber,
    XTextarea
  },
  created() {
    this.preview = new Date().getTime();
  },
  methods: {
    goBack() {
      this.$emit("nodeClick");
    },
    changeIsMissing(val) {
      if (val == "1") {
        this.dataDetail.shouldScore = 0;
        this.dataDetail.actualScore = 0;
        this.fillable = true;
      } else {
        this.dataDetail.shouldScore = this.dataDetail.oldShouldScore;
        this.fillable = false;
      }
    },
    saveItem() {
      if (!this.dataDetail.actualScore) {
        document.getElementsByClassName(
        "weui-mask"
      )[2].style.zIndex = 700;
        document.getElementsByClassName(
        "weui-dialog"
      )[2].style.zIndex = 701;
        AlertModule.show({
          content: "请输入实得分!"
        });
        return false;
      }
      if (this.dataDetail.actualScore < this.dataDetail.shouldScore&&!this.dataDetail.deductionReason) {
        document.getElementsByClassName(
        "weui-mask"
      )[2].style.zIndex = 700;
        document.getElementsByClassName(
        "weui-dialog"
      )[2].style.zIndex = 701;
        AlertModule.show({
          content: "请输入扣分原因!"
        });
        return false;
      }
      this.$emit("save", this.dataDetail);
    },
    upload(e) {
      let This = this;
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      This.$axiosAjax.upload(param).then(res => {
        This.dataDetail.fileList.push({
          name: res.data.result.fileName,
          size: res.data.result.fileSize,
          url: res.data.result.fileUrl
        });
      });
    },
    removeImg(name, index) {
      document.getElementsByClassName(
        "weui-mask_transparent"
      )[0].style.zIndex = 600;
      document.getElementsByClassName("weui-dialog")[1].style.zIndex = 601;
      this.$vux.confirm.show({
        content: "确定是否删除图片",
        onCancel: () => {
          console.log(this); //当前 vm
        },
        onConfirm: () => {
          this.dataDetail.fileList.splice(index, 1);
        }
      });
    },
    previewImg(){
       document.getElementsByClassName(
        "pswp"
      )[0].style.zIndex = 701;
    }
  }
};
</script>
<style lang="less" scoped>
.section-wrap {
  height: 100% !important;
}

.select-section {
  display: flex;
}

.select-section div {
  padding-left: 26px;
  background: url(../../../static/images/select.png) no-repeat left center;
  background-size: 17px 17px;
}

.select-section div:first-child {
  margin-right: 58px;
}

.select-section .active {
  background: url(../../../static/images/selected.png) no-repeat left center;
  background-size: 17px 17px;
}

.weui-cell_switch {
  width: 100%;
}

a {
  height: 40px;
  border-radius: 20px;
  display: inline-block;
  width: 200px;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

.saveBtns {
  background: #469b7a;
  color: #fff;
  float: right;
  padding-right: 15px;
  border-left: 1px solid #fff;
  padding-left: 15px;
  width: 70px;
  border-radius: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background-color: #469b7a;
  padding-right: 15px;
  h3 {
    color: #fff;
  }
}
.section-wrap {
  display: flex;
  flex-direction: column;
  .form-section {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
<style lang="less">
.numBut .vux-number-selector-sub {
  height: 36px !important;
  padding-top: 8px;
}

.numBut .vux-number-input {
  height: 36px !important;
}

.numBut .vux-number-selector-plus {
  height: 36px !important;
  padding-top: 8px;
}

.numBut .vux-cell-primary {
  padding-top: 10px;
}

.upload-wrap .upload-item {
  float: left;
  margin-top: 20px;
}
.weui-cells {
  border-top: 1px solid #efeff4;
}
.weui-label {
  margin-top: 6px;
}
.form-item .s_textarea {
  width: 100%;
  padding-right: 20px;
  height: 60px;
}
.s_fixed {
  width: 100%;
  height: 100%;
}
.s_fixed .vux-x-switch {
  height: 100%;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.s_fixed .vux-x-switch .weui-cell__bd {
  height: 100%;
}
.s_fixed .vux-x-switch .weui-cell__bd .weui-label {
  margin-top: 0 !important;
}
.s_fixed .vux-x-switch .weui-cell__ft {
  padding-top: 25px;
}
</style>
